#risksListContainer(
	ng-switch="vm.toShow"
	tabindex="0"
	tdr-focus="true"
	ng-mousemove="vm.initSetFocus()")

	// List
	div(ng-switch-when="list")
		.riskListItem(
			id="{{'risk' + risk._id}}"
			ng-repeat="risk in vm.risksToShow track by $index"
			layout="column"
			ng-click="vm.selectRisk(risk)")

			#risksListItemContent(layout='column')

				div(layout='row')
					#riskRoleIndicator(ng-style="{backgroundColor: risk.roleColor}")
					.riskListItemThumbnail(layout="column", layout-align="center center")
						img(ng-if="risk.thumbnail", ng-src="{{risk.thumbnailPath}}")
						md-icon.angular-material-icons.riskListItemMissingThumbnail(
							ng-if="!risk.thumbnail") insert_photo

					div(flex, layout="column")
						label#risksListItemTitle(flex="none") {{risk.name}}
						#risksListItemInfo(layout="row", layout-align="space-between center", flex="none")
							div(layout="row", layout-align="start start")

								md-icon.angular-material-icons#riskListItemStatus(
									aria-label="Status Icon"
									ng-style="{'color': risk.statusIcon.colour }") {{risk.statusIcon.icon}}

							label(flex) {{risk.owner}}
							#risksListItemDate
								label {{ risk.created | prettyDate }}
						#risksListItemDescription
							label(ng-bind-html="risk.desc | linky:'_blank'") {{risk.desc}}

			.riskJustClosed(ng-if="risk.justClosed" flex="none")
				.closedText This risk is now closed

			md-divider

			#risksListItemEnter(
				ng-if="vm.isSelectedRisk(risk)"
				ng-click="vm.editRisk(risk)"
				layout="column"
				layout-align="center center")

				md-icon.angular-material-icons arrow_forward


	// Info
	.cardInfo(ng-switch-when="info")
		p {{vm.info}}
